{# 以下是分页  #}
<div>
    <nav aria-label="Page navigation" id="paginator_url_ajax" url={{ url }}>
        <ul class="pagination">
            <li class="disabled">
                <span>每页显示</span>
            </li>
            <li>
                            <span>
                                <select id="line_set" line_count={{ line_count }}>
                                    <option>5</option>
                                    <option>10</option>
                                    <option>15</option>
                                    <option>20</option>
                                </select>
                            </span>
            </li>

            <li>
                <a
                        aria-label="Previous" onclick="select_page_num(1)">
                    <span aria-hidden="true">第一页</span>
                </a>
            </li>

            {% if current_page.has_previous %}
                <li>
                    <a aria-label="Previous" onclick="select_page_num({{ current_page.previous_page_number }})" )>
                        <span aria-hidden="true">上一页</span>
                    </a>
                </li>
            {% else %}
                <li class="disabled">
                    <a aria-label="Previous">
                        <span aria-hidden="true">上一页</span>
                    </a>
                </li>
            {% endif %}
            {# 拿到页码书总列表 #}
            {% for item in  page_range %}
                {% if current_page_num == item %}
                    <li class="active" onclick="select_page_num({{ item }})"><a>{{ item }}</a>
                    </li>
                {% else %}
                    <li onclick="select_page_num({{ item }})">
                        <a>{{ item }}</a>
                    </li>
                {% endif %}
            {% endfor %}

            {% if current_page.has_next %}
                <li>
                    <a aria-label="Next" onclick="select_page_num({{ current_page.next_page_number }})" )>
                        <span aria-hidden="true">下一页</span>
                    </a>
                </li>
            {% else %}
                <li class="disabled">
                    <a href="" aria-label="Previous">
                        <span aria-hidden="true">下一页</span>
                    </a>
                </li>
            {% endif %}
            <li>
                <a onclick="select_page_num({{ last_page }})">
                    <span aria-hidden="true">最后一页</span>
                </a>
            </li>
            <li class="disabled">
                <span>跳转到</span>
            </li>
            <li>
                                <span>
                                    <select id="page_set" page_set= {{ current_page_num }}>
                                      {% for   i  in paginator_num_pages_list %}
                                          <option>{{ i }}</option>);
                                      {% endfor %}
                                    </select>
                                </span>
            </li>
            <li class="disabled">
                <a href="" aria-label="Previous">
                    <span aria-hidden="true">共 {{ paginator.num_pages }} 页 , {{ paginator.count }} 条 </span>
                </a>
            </li>
        </ul>
    </nav>
</div>
{#  以上是分页 #}
{% block script %}
    <script>
        //第一页，上一页，选择页码列表，下一页，最后一页共用一个函数
        function select_page_num(v_page_num) {
            var page_num = v_page_num;
            var line_count_set = $('#line_set').val();
            var search = $('#aa_search').val();

            var url = $('#paginator_url_ajax').attr('url')
            $.ajax({
                url: url, //后台处理函数的url,
                type: "POST",
                data: {
                    line_count: line_count_set,
                    user_search: search,
                    page: page_num
                },
                dataType: "html",
                success: function (result) {
                    $("#table_pagination").html(result);
                    //回显每页显示的条目数
                    var count_set = $("#line_set").attr("line_count");
                    $("#line_set").val(count_set)
                    //回显前跳转的页数
                    var page_set = $("#page_set").attr("page_set");
                    $("#page_set").val(page_set)
                    //回显搜索内容
                    var search = $("#aa_search").attr("aa_search_set");
                    $('#aa_search').val(search)
                }
            })
        }
        //选择每页显示值
        $("#line_set").change(function () {
            select_page_num.call(null, 1)
        })
        //跳转到某页
        $("#page_set").change(function () {
            var page_set = $('#page_set').val();
            select_page_num.call(null, page_set)
        })
    </script>
{% endblock %}

